<template lang="pug">
.search_bar
    input( v-model="keyword" type="text"  )
    .search
</template>


<script setup lang="ts">

import {ref, watchEffect} from "vue";
import {StoreSearchKeyWord} from "../../store";

const store = StoreSearchKeyWord()
const keyword = ref("")
watchEffect(() => {
    store.SetKeyWord(keyword.value)
})
</script>
<style scoped lang="sass">
$searchWidth: 230px
.search_bar
  display: flex
  input
    font-family: 'Inconsolata', monospace
    top: 0
    right: 0
    bottom: 0
    left: 0
    width: 50px
    height: 50px
    outline: none
    border: none
    background: #589bc5
    color: white
    border-radius: 30px
    transition: all 1s
    opacity: 0
    z-index: 3
    font-weight: bolder
    letter-spacing: 0.1em
    font-size: 20px
    padding: 0 10px 0 10px

    &:hover
      cursor: pointer

    &:focus
      width: $searchWidth
      opacity: 1
      cursor: text

    &:focus ~ .search
      right: -$searchWidth
      background: #5d7c8c
      z-index: 6

      &::before
        top: 0
        left: 0
        width: 25px

      &::after
        top: 0
        left: 0
        width: 25px
        height: 2px
        border: none
        background: white
        border-radius: 0
        transform: rotate(-45deg)


    &::placeholder
      color: white
      opacity: 0.5
      font-weight: bolder

  .search
    position: absolute
    margin: auto
    top: 0
    right: 0
    bottom: 0
    left: 0
    width: 60px
    height: 60px
    background: #5e7cad
    border-radius: 50%
    transition: all 1s
    z-index: 2

    &:hover
      cursor: pointer

    &::before
      content: ""
      position: absolute
      margin: auto
      top: 22px
      right: 0
      bottom: 0
      left: 22px
      width: 12px
      height: 2px
      background: #56bbdc
      transform: rotate(45deg)
      transition: all .5s

    &::after
      content: ""
      position: absolute
      margin: auto
      top: -5px
      right: 0
      bottom: 0
      left: -5px
      width: 20px
      height: 20px
      border-radius: 50%
      border: 2px solid #4a588c
      transition: all .5s


</style>
